<template>
  <div>
    <h2>组合API-案例实战</h2>
    <hr>
    <div>坐标信息：{{'(' + x + ',' + y + ')'}}</div>
    <hr>
    <div>当前数量：{{num}}</div>
    <button @click='handleClick'>点击</button>
  </div>
</template>
<script>
import { onMounted, onUnmounted } from 'vue'
import m1 from '@/module/m1.js'
import m2 from '@/module/m2.js'

export default {
  name: 'App',
  setup () {
    // 案例
    // 1、控制鼠标的坐标显示
    // 生命周期函数必须在setup的顶层调用
    onMounted(() => m1.bindEvent())
    onUnmounted(() => m1.unbindEvent())
    // ------------------------------------
    // 2、控制数据的累加操作
    return { ...m1, ...m2 }
  }
}
</script>
